{% spaceless %}
  {% if quirks %}{% else %}<!doctype html>{% endif %}
{% endspaceless %}
<!--
Copyright 2009 Google Inc.   All Rights Reserved.
Author: elsigh@google.com (Lindsey Simon)
-->
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Selector Shell</title>
    <style>
      @import "/static/selector-shell.css";
    </style>
  </head>
  <body>
    <div id="cssh">
      <h1>CSS Selector Shell</h1>
      <div id="cssh-dir">
        <h2>Directions</h2>
        <ol>
          <li>
            Type/paste some handcrafted CSS into the first box.
          </li>
          <li>
            Click the "Test It" button.
          </li>
          <li>
            The second box (and the example divs) show what your browser
            <a href="http://dev.w3.org/csswg/cssom/">makes of it</a>.
          </li>
        </ol>
      </div>
      <noscript>
        <h2>
          Sorry, but there's no backend for the Selector Shell. The
          functionality is pure Javascript. Therefore, it doesn't have a
          degradation path at the moment, other than my apology.
        </h2>
      </noscript>

      <div id="cssh-toy">
        <div class="cssh-c">
          <textarea
            id="cssh-shell" name="cssh-shell">
/* Some example CSS */
body .class1 {
  border-color: black;
}
/* Gecko hack. */
@-moz-document url-prefix() {
  body .class1 { border-color: orange; }
}
/* Pre IE7 hack. */
* html body .class1 {
  border-color: green;
}
/* IE7 hack. */
body .class1 {
  *border-color: purple;
}
/* Webkit hack. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  body .class1 { border-color: red; }
}
.class1, .class2 {
  color: purple;
}
/* Direct child selector. */
.class1 > .class2 {
  color: red;
}
/* Combined selector. */
.class1.class2 {
  color: blue;
  color: orange;
}
          </textarea>
        </div>
        <div id="cssh-translate-c" class="cssh-c">
          <input
            id="cssh-translate" type="button" value="Test It" />
        </div>
        <div class="cssh-c">
          <textarea
            id="cssh-translation" name="cssh-translation"></textarea>
        </div>
      </div>

      <h3>Example elements you can target</h3>
      <div class="class1 class2">
        div class="class1 class2"
        <div class="class2">
          div class="class2"
        </div>
      </div>

      <div id="cssh-footer">
        <ul>
          <li>
            <a href="http://code.google.com/p/selector-shell/">Source code</a>
          </li>
          <li>
            Author: Lindsey Simon
            &lt;elsigh@google.com&gt;
          </li>
        </ul>
        <a id="cssh-appengine"
           class="cssh-ir"
           href="http://code.google.com/appengine"
           title="Powered by Google App Engine"><span>Powered by
             Google App Engine</span></a>

        <a id="cssh-dojo"
           class="cssh-ir"
           href="http://dojotoolkit.org/"
           title="Powered by Dojo"><span>Powered by
             Dojo"></span></a>
      </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.2/dojo/dojo.xd.js"></script>
    <script src="static/selector-shell.js"></script>
    <script>
      (function() {var s = new SelectorShell();})();
    </script>

    <script type="text/javascript">
      var gaJsHost = (('https:' == document.location.protocol) ? 'https://ssl.' : 'http://www.');
      document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
      try {
      var pageTracker = _gat._getTracker('UA-6802764-1');
      pageTracker._trackPageview();
      } catch(err) {}
    </script>
  </body>
</html>

